<template>
    <el-card class="box-card">
      <el-form :inline="true" :model="searchData" class="demo-form-inline">
      <el-form-item label="角色名字">
        <el-input v-model="searchData.name" placeholder="请输入名字" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询12</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="data.tableData" style="width: 100%">
      <el-table-column prop="id" label="id"/>
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="desc" label="描述" />
    </el-table>
    <el-pagination class='page' small layout="prev, pager, next" :total="data.tableData.length" />
    </el-card>
  </template>
  
  <script setup lang='ts'>
  import { ref, reactive, onMounted } from 'vue'
  import {testApi} from "@/api/user.ts"
  const data = reactive({
      tableData:[
          {name:"管理员",age:12,id:1,desc:"成都市青羊区光华锦苑3"},
          {name:"开发人员",age:12,id:1,desc:"成都市青羊区光华锦苑3"},
          {name:"后端人员",age:12,id:1,desc:"成都市青羊区光华锦苑3"},
          {name:"运维人员",age:12,id:1,desc:"成都市青羊区光华锦苑3"},
          {name:"经理",age:12,id:1,desc:"成都市青羊区光华锦苑3"},
          {name:"第三方客户",age:12,id:1,desc:"成都市青羊区光华锦苑3"},
          {name:"测试人员",age:12,id:1,desc:"成都市青羊区光华锦苑3"},
          {name:"甲方",age:12,id:1,desc:"成都市青羊区光华锦苑3"}
      ],
      searchData:{}
  })
  const  searchData = reactive({
    name:"",
    desc:""
  })
  const onSubmit = ()=>{
      console.log("搜索")
  }

  onMounted(()=>{
    testApi().then(res=>{
        console.log("==================request")
        console.log(res)
    })
  })
  </script>
  <style lang='scss'  scoped>
  .page{
    display: flex;
    justify-content: center;
    margin:20px auto;
    text-align: center;
  }
  </style>